<template>
	<div class="statement">
		<div class="header">
			<div class="header_d">
				<div class="flex main_zdy sideAlign_center">
					<div class="userimg"><img :src="list.headImage"></div>
					<div class="username">{{list.nickName}}的个人报表</div>
				</div>
			</div>
			<div class="header_dd flex main_zdy mainAlign_between">
				<div class="flex side_sdx">
					<div><span class="header_dd_uu text-center">{{list.preProfit}}</span><span class='tag'>元</span></div>
					<span class="header_dd_u text-center">预估明细</span>
				</div>
				<div class="flex side_sdx">
					<span class="header_dd_uu text-center">{{list.actualProfit}}<span class='tag'>元</span></span>
					<span class="header_dd_u text-center">累计收益</span>
				</div>
				<div class="flex side_sdx">
					<span class="header_dd_uu text-center">{{list.teamCount}}<span class='tag'>人</span></span>
					<span class="header_dd_u text-center">团队人数</span>
				</div>
			</div>
		</div>

		<div class="classify">
			<div class="classify_d flex main_zdy mainAlign_around" id="classify_d">
				<div @click="sky" class="on">今天</div>
				<div @click="week">本周</div>
				<div @click="month">本月</div>
				<div @click="more">{{morename}}</div>
			</div>
			<div class="classify_dd ">

				<div class="yin">
					<div class="yin_d">
						<div>
							<span>{{data.totalMoney}}</span>
							<span>元</span>
						</div>
						<div>销售金额</div>
					</div>
					<div class="yin_d">
						<div>
							<span>{{data.orderCount}}</span>
							<span>笔</span>
						</div>
						<div>订单数量</div>
					</div>
				</div>

			</div>

			<div id="main" style="width: 100%;height:250px;box-sizing: border-box;"></div>

		</div>

		<div class="set flex mainAlign_center sideAlign_center" @click="setcommon" v-if="list.state =='2'">取消经理</div>
		<div class="set flex mainAlign_center sideAlign_center" @click="setcloud" v-if="list.state =='1'">设置为经理</div>

		<div class="quarterC" v-show="quartershow" @click="quarterC">
			<div class="quarter">
				<div class="quarter_d" v-for="item in quarter" @click="quarteron(item)">{{item}}</div>
				<div class="cancel">取消</div>
			</div>
		</div>

	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js'
	import { Toast } from 'mint-ui';
	import { MessageBox } from 'mint-ui';
	export default {
		data() {
			return {
				list: [],
				userId: '',
				skyy: [],
				weekk: [],
				monthh: [],
				data: [],
				quartershow: false,
				quarter: ['本季度（当前）', '本年度'],
				morename: '更多',
				appId:'',
			}
		},
		created() {
			window.onload = function() {
				var lists = document.getElementById("classify_d");
				var Odiv = lists.getElementsByTagName('div');
				for(var i = 0; i < Odiv.length; i++) {
					Odiv[i].onclick = function() {
						for(var j = 0; j < Odiv.length; j++) {
							Odiv[j].classList.remove("on"); //清除所有reds样式
						}
						this.classList.add("on");
					}
				}
			}

//			this.token = localStorage.getItem('token');
			this.token = this.$route.query.token;
			this.appId = this.$route.query.appId;
			this.userId = this.$route.query.userId;
			var href = window.location.href;
			this.user();

			var Url = BaseUrl + "users/personal/perform/today" + "?userId=" + this.userId;
			var x = []
			var y = []
			this.$http.get(Url).then(res => {
				if(res.data.code == "10000") {
					this.data = res.data.data;
					this.skyy = res.data.data.list;
					for(let i = 0; i < this.skyy.length; i++) {
						x.push(this.skyy[i].TIME);
						y.push(this.skyy[i].AMOUNT);
					}
					var echarts = require('echarts');
					var myChart = echarts.init(document.getElementById('main'));
					var option = {
						xAxis: {
							name: '时',
							type: 'category',
							data: x
						},
						yAxis: {
							name: '金额（元）',
							type: 'value'
						},
						series: [{
							data: y,
							type: 'line'
						}]
					};

					myChart.setOption(option);
				}
			})

		},
		methods: {
			//用户信息
			user(){
				var Url = BaseUrl + "users/personal/perform/head" + "?userId=" + this.userId;
				this.$http.get(Url).then(res => {
					if(res.data.code == "10000") {
						this.list = res.data.data;
					}
				}).catch(error => {
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			
			//天
			sky: function() {
				var Url = BaseUrl + "users/personal/perform/today" + "?userId=" + this.userId;
				var x = []
				var y = []
				this.$http.get(Url).then(res => {
					if(res.data.code == "10000") {
						this.data = res.data.data;
						this.skyy = res.data.data.list;
						for(let i = 0; i < this.skyy.length; i++) {
							x.push(this.skyy[i].TIME);
							y.push(this.skyy[i].AMOUNT);
						}
						var echarts = require('echarts');
						var myChart = echarts.init(document.getElementById('main'));
						var option = {
							xAxis: {
								name: '时',
								type: 'category',
								data: x
							},
							yAxis: {
								name: '金额（元）',
								type: 'value'
							},
							series: [{
								data: y,
								type: 'line'
							}]
						};

						myChart.setOption(option);
					}
				})
			},
			//周
			week: function() {
				var Url = BaseUrl + "users/personal/perform/week" + "?userId=" + this.userId;
				var x = []
				var y = []
				this.$http.get(Url).then(res => {
					if(res.data.code == "10000") {
						this.data = res.data.data
						//				console.log(this.data)	
						this.weekk = res.data.data.list;
						for(let i = 0; i < this.weekk.length; i++) {
							x.push(this.weekk[i].TIME);
							y.push(this.weekk[i].AMOUNT);
						}
						var echarts = require('echarts');
						var myChart = echarts.init(document.getElementById('main'));
						var option = {
							xAxis: {
								name: '天',
								type: 'category',
								data: x
							},
							yAxis: {
								name: '金额（元）',
								type: 'value'
							},
							series: [{
								data: y,
								type: 'line'
							}]
						};

						myChart.setOption(option);
					}

				})
			},
			//月
			month: function() {
				var Url = BaseUrl + "users/personal/perform/month" + "?userId=" + this.userId;
				var x = []
				var y = []
				this.$http.get(Url).then(res => {
					if(res.data.code == "10000") {
						this.data = res.data.data
						this.monthh = res.data.data.list;
						for(let i = 0; i < this.monthh.length; i++) {
							x.push(this.monthh[i].TIME);
							y.push(this.monthh[i].AMOUNT);
						}
						var echarts = require('echarts');
						var myChart = echarts.init(document.getElementById('main'));
						var option = {
							xAxis: {
								name: '天',
								type: 'category',
								data: x
							},
							yAxis: {
								name: '金额（元）',
								type: 'value'
							},
							series: [{
								data: y,
								type: 'line'
							}]
						};

						myChart.setOption(option);
					}
				})
			},
			//设置普通用户
			setcommon: function() {
						var url = BaseUrl + 'users/partner/cancelSales?appId=' + this.appId + '&token=' + this.token + '&subYunId=' + this.userId

						this.$http.post(url).then(res => {
							if(res.data.code == '10000') {
								Toast({
									iconClass: 'mint-toast-icon mintui mintui-success',
									message: '取消成功'
								})
								this.user();
							} else {
								Toast({
									message: res.data.msg,
									position: 'middle',
									duration: 3000
								})
							}
						}).catch(error => {
							Toast({
								message: "网络异常",
								position: 'middle',
								duration: 3000
							})
						})
			},
			//请设置经理名称
			setcloud: function() {
				MessageBox.prompt('请设置经理名称', {
					inputValidator: (val) => {
						if(val === null) {
							return true; //初始化的值为null，不做处理的话，刚打开MessageBox就会校验出错，影响用户体验
						}
					},
					showCancelButton: false
				}).then((val) => {
					if(val.value != '' || val.vlaue != null) {
						var url = BaseUrl + 'users/partner/setSales?appId=' + this.appId + '&token=' + this.token + '&subYunId=' + this.userId + '&saleName=' + val.value

						this.$http.post(url).then(res => {
							if(res.data.code == '10000') {
								Toast({
									iconClass: 'mint-toast-icon mintui mintui-success',
									message: '设置成功'
								})
								this.user();
							} else {
								Toast({
									message: res.data.msg,
									position: 'middle',
									duration: 3000
								})
							}
						}).catch(error => {
							Toast({
								message: "网络异常",
								position: 'middle',
								duration: 3000
							})
						})
					}
				})
			},
			//更多
			more: function() {
				this.quartershow = true;
			},
			//取消
			quarterC: function() {
				if(this.morename == '更多'){
					var lists = document.getElementById("classify_d");
					var Odiv = lists.getElementsByTagName('div');
					for(var i = 0; i < Odiv.length; i++) {
							for(var j = 0; j < Odiv.length; j++) {
								Odiv[j].classList.remove("on"); //清除所有reds样式
							}
							Odiv[0].classList.add("on");
					}
				}
				this.quartershow = false;
			},

			//点击季度选择
			quarteron: function(name) {
				this.morename = name;

				if(this.morename == '本季度（当前）') {
					var Url = BaseUrl + "users/personal/perform/quarter" + "?userId=" + this.userId;
					var x = []
					var y = []
					this.$http.get(Url).then(res => {
						if(res.data.code == "10000") {
							this.data = res.data.data
							//				console.log(this.data)	
							this.weekk = res.data.data.list;
							for(let i = 0; i < this.weekk.length; i++) {
								x.push(this.weekk[i].TIME);
								y.push(this.weekk[i].AMOUNT);
							}
							var echarts = require('echarts');
							var myChart = echarts.init(document.getElementById('main'));
							var option = {
								xAxis: {
									name: '月',
									type: 'category',
									data: x
								},
								yAxis: {
									name: '金额（元）',
									type: 'value'
								},
								series: [{
									data: y,
									type: 'line'
								}]
							};

							myChart.setOption(option);
						}

					})
				} else {
					var Url = BaseUrl + "users/personal/perform/year" + "?userId=" + this.userId;
					var x = []
					var y = []
					this.$http.get(Url).then(res => {
						if(res.data.code == "10000") {
							this.data = res.data.data
							//				console.log(this.data)	
							this.weekk = res.data.data.list;
							for(let i = 0; i < this.weekk.length; i++) {
								x.push(this.weekk[i].TIME);
								y.push(this.weekk[i].AMOUNT);
							}
							var echarts = require('echarts');
							var myChart = echarts.init(document.getElementById('main'));
							var option = {
								xAxis: {
									name: '季',
									type: 'category',
									data: x
								},
								yAxis: {
									name: '金额（元）',
									type: 'value'
								},
								series: [{
									data: y,
									type: 'line'
								}]
							};

							myChart.setOption(option);
						}

					})
				}

			}

		}
	}
</script>

<style scoped="scoped">
	html,
	body,
	.statement {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		background: #FF2040!important;
	}
	
	.header {
		width: 100%;
		padding-bottom: 0.38rem;
	}
	
	.header_d {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0.61rem;
		margin-left: 0.53rem;
	}
	
	.userimg {
		width: 1.22rem;
		height: 1.22rem;
		border-radius: 50%;
		margin-right: 0.33rem;
	}
	
	.userimg img {
		width: 1.22rem;
		height: 1.22rem;
		border-radius: 50%;
	}
	
	.username {
		font-family: PingFangSC-Medium;
		font-size: 0.32rem;
		color: #FFFFFF;
		letter-spacing: 0;
	}
	
	.header_dd {
		width: 100%;
		justify-content: space-between;
		padding: 0 0.47rem;
	}
	
	.header_dd_u {
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #FFFFFF;
		letter-spacing: 0;
		opacity: 0.5;
	}
	
	.header_dd_uu {
		font-family: PingFangSC-Semibold;
		font-size: 0.36rem;
		color: #FFFFFF;
		letter-spacing: 0;
	}
	
	.tag {
		font-family: PingFangSC-Regular;
		font-size: 0.2rem;
		color: #FFFFFF;
		letter-spacing: 0;
		opacity: 0.5;
	}
	
	.classify {
		margin: 0 0.2rem;
		border-radius: 0.2rem;
		background: #FFFFFF;
		box-shadow: 0 8px 12px 0 rgba(2, 2, 2, 0.04);
	}
	
	.classify_d {
		width: 100%;
		overflow: hidden;
		padding: 0.44rem 0 0.35rem 0;
	}
	
	.classify_d div {
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #8F9399;
		letter-spacing: 0;
	}
	
	.on {
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #FF6742!important;
		letter-spacing: 0;
	}
	
	.classify_dd {
		padding: 0 0.5rem;
	}
	
	.classify_dd .yin {
		box-sizing: border-box;
		height: 1.3rem;
		opacity: 0.6;
		overflow: hidden;
		background: #F4F7FA;
		border-radius: 0.12rem;
		padding: 0.22rem 0 0.25rem 0;
	}
	
	.yin_d {
		width: 50%;
		height: 100%;
		float: left;
		border-right: 1px solid #E3E7EE;
		padding-right: 0.7rem;
		text-align: center;
	}
	
	.yin_d:nth-child(2) {
		border: none;
	}
	
	.yin_d div:nth-child(1) span:nth-child(1) {
		font-family: PingFangSC-Semibold;
		font-size: 0.36rem;
		color: #FF6742;
		letter-spacing: 0;
	}
	
	.yin_d div:nth-child(1) span:nth-child(2) {
		font-family: PingFangSC-Regular;
		font-size: 0.2rem;
		color: #8F9399;
		letter-spacing: 0;
	}
	
	.yin_d div:nth-child(2) {
		font-family: PingFangSC-Regular;
		font-size: 0.24rem;
		color: #8F9399;
		letter-spacing: 0;
	}
	
	.set {
		height: 0.88rem;
		margin: 0 0.2rem;
		background: #FFFFFF;
		margin-top: 0.4rem;
		font-family: PingFangSC-Medium;
		font-size: 0.32rem;
		color: #FF2040;
		letter-spacing: 0;
		line-height: 0.88rem;
	}
	
	.quarterC {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.50);
		position: fixed;
		top: 0;
		left: 0;
		margin-bottom: 3.3rem;
	}
	
	.quarter {
		width: 100%;
		background: #F4F7FA;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	
	.quarter_d {
		width: 100%;
		height: 1rem;
		background: #FFFFFF;
		text-align: center;
		line-height: 1rem;
		font-family: PingFangSC-Regular;
		font-size: 0.3rem;
		color: #303133;
		letter-spacing: 0;
		border-top: 1px solid #ECEEF5;
	}
	
	.onn {
		width: 100%;
		height: 1rem;
		background: #FFFFFF;
		text-align: center;
		line-height: 1rem;
		font-family: PingFangSC-Regular;
		font-size: 0.3rem;
		color: #C0C4CC;
		letter-spacing: 0;
		border-top: 1px solid #ECEEF5;
	}
	
	.cancel {
		width: 100%;
		height: 1rem;
		background: #FFFFFF;
		text-align: center;
		line-height: 1rem;
		font-family: PingFangSC-Regular;
		font-size: 0.3rem;
		color: #303133;
		letter-spacing: 0;
		margin-top: 0.2rem;
	}
</style>